<template>
  <div>
    <!-- 新增 -->
    <el-button class="add" type="primary" @click="addmenulist">新增</el-button>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      :default-expand-all="false"
      border
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="url" label="菜单url" />
      <el-table-column prop="type" label="类型">
        <template #default="scope">
          <el-tag>{{ scope.row.type }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="perms" label="授权标识" />
      <el-table-column prop="num" label="排序号" />
      <el-table-column prop="" label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog v-model="dialogFormVisible" :title="title" width="450px">
      <el-form :model="form" label-width="120px">
        <el-form-item label="类型">
          <el-radio-group v-model="form.type">
            <el-radio label="目录">目录</el-radio>
            <el-radio label="菜单">菜单</el-radio>
            <el-radio label="按钮">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="form.name" placeholder="菜单名称" />
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-cascader
            v-model="form.parent_id"
            :options="menulist"
            :props="props1"
            clearable
          />
        </el-form-item>
        <el-form-item v-if="form.type == '菜单'" label="菜单路由">
          <el-input v-model="form.url" placeholder="菜单路由" />
        </el-form-item>
        <el-form-item
          v-if="form.type == '菜单' || form.type == '按钮'"
          label="授权标识"
        >
          <el-input
            v-model="form.perms"
            placeholder="多个用逗号分隔,如user:list,user:create"
          />
        </el-form-item>
        <el-form-item v-if="form.type != '按钮'" label="排序号">
          <el-input-number
            v-model="form.num"
            class="mx-4"
            :min="1"
            :max="100"
            controls-position="right"
            placeholder="0"
          />
        </el-form-item>
        <el-form-item v-if="form.type != '按钮'" label="菜单图标">
          <el-input v-model="form.icon" placeholder="菜单图标名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="
              dialogFormVisible = false;
              render();
            "
            >取消</el-button
          >
          <el-button type="primary" @click="add"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted } from "vue";
import { useMenu } from "../../../stores/menu";
import { getTreeFromList } from "../../../utils/index";
import { addmenu, editmenu, delmenu } from "../../../api/MenuApi";
import { ElMessage, ElMessageBox } from "element-plus";

const menuStore = useMenu();

const menulist = ref();

onMounted(() => {
  render();
});

const render = async () => {
  await menuStore.getMenulist();
  tableData.value = getTreeFromList(menuStore.menulist, 3);
  menulist.value = getTreeFromList(menuStore.menulist, 2);
};

interface User {
  id: number;
  date: string;
  name: string;
  address: string;
  hasChildren?: boolean;
  children?: User[];
}

const props1 = {
  checkStrictly: true,
  label: "name",
  value: "menu_id",
};

// 弹框名称
const title = ref("");

// 待修改的id
const editid = ref(0);

// 待删除的id
const delid = ref(0);

// 数据
const tableData = ref();

// 弹框是否打开
const dialogFormVisible = ref(false);

// 默认宽度
const formLabelWidth = "140px";

// 表单数据
let form: any = reactive({
  type: "目录",
  name: "",
  parent_id: [0],
  url: "",
  perms: "",
  num: 0,
  icon: "",
});

// 点击新增执行的函数
const addmenulist = () => {
  for (let key in form) {
    form[key] = "";
  }
  title.value = "新增";
  dialogFormVisible.value = true;
};

// 点击确定添加
const add = () => {
  if (title.value == "新增") {
    // 新增
    addmenu({
      ...form,
      parent_id: form.parent_id.splice(form.parent_id.length - 1, 1),
    }).then((res) => {
      if (res.data.code == 1) {
        render();
      }
    });
  } else {
    // 修改
    let obj: any = {
      ...form,
      editid,
    };
    editmenu(obj).then((res) => {
      console.log(res);
      if (res.data.code == 1) {
        render();
      }
    });
  }
  dialogFormVisible.value = false;
};
// 点击修改执行的函数
const handleEdit = (index: number, row: User) => {
  editid.value = row.id;
  title.value = "编辑";
  form = row;
  dialogFormVisible.value = true;
};

// 点击删除执行的函数
const handleDelete = (index: number, row: User) => {
  delid.value = row.id;
  ElMessageBox.confirm("你确定要删除这条菜单数据吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delmenu(delid.value).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          render();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
</script>

<style scoped>
.add {
  margin-bottom: 10px;
}
</style>
